My professional focus hasn't been on front end development for quite some time. However, since I tend to work solo on most of my data-oriented projects there is an unavoidable amount of HTML/CSS work that needs to get done.
DECEMBER 5, 2018
For the past five years I've relied on the Pure CSS library, more recently an off-shoot of my own called Hydrogen. Both are lightweight libraries, following SMACSS, and allow you to rapidly construct elegant UIs. Like most, I used a pre-processor and inevitably ended up writing a moderate amount of custom CSS to work in conjunction with the library.
Given my propensity for experimenting with new (for me) technology, I recently came across Mithril, which I haven't been able to use in production yet. But I am hopeful to do so soon. In exploring Mithril's documentation, I came across an area regarding CSS where the creators/maintainers of Mithril go over applying their ethos of simplicity to CSS. They go on to describe an approach whereby we use plain-old CSS, avoid nesting, use single-class selectors, develop a naming convention and place CSS rules on a single line. At first, I thought "boy that sounds stupid". The post goes on to introduce Tachyons, a functional CSS library that establishes a single class-to-rule philosophy. Think <button class="btn btn-red"> vs <button class="bg-red br2 bw0 mb1 pa1 white">, where the former is the traditional multiple class-to-rule and the latter is the functional single class-to-rule approach. Again, at first I thought "boy that looks stupid".
None the less, being open-minded I thought why not give it a try. As an experiment, I took a UI I had already done using the traditional approach, which took about 2 weeks and was around 1000 lines of custom CSS. Using Tachyons I was able to remake the UI in under 2 days, and reduced the lines of custom CSS to 11. Yes, you read that correctly, 11 lines of code.
So what made the process so much faster? It had nothing to do with Tachyons being some silver bullet. But rather, the DRAMATIC reduction in time lost navigating code and task-switching. Since Tachyons follows a specific naming convention, and strictly follows the single class-to-rule approach. All of this means you construct your styles functionally in your markup, reducing the task-switching (from HTML to CSS) to almost zero. What's more, learning the Tachyon syntax is dead simple, as the un-minified source serves as the documentation (although the docs are phenomenal). Bundled together, this yields huge time savings, makes debugging non-existent and gets your to production faster.
Bottom line here is that if you do any amount of front end work, you most definitely need to give the Tachyons library a shot.